<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
 body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #1a1a1a;
}

.svg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 1%;
  top: 0;
  animation: scale cubic-bezier(0.01, 8.33, 0.1, -2.33) 50s infinite;
}

@keyframes scale {
  50% {
    transform: scale(1.2);
  }
}
svg {
  width: 100vh;
  height: 100vh;
  webkit-filter: blur(100px);
  display: block;
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  mix-blend-mode: "hue";
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 51%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -20;
}

#paper {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0;
  top: 50%;
  left: 50%;
  z-index: -1;
  mix-blend-mode: difference;
}

#poper {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0;
  top: 50%;
  left: 50%;
  z-index: 1;
  opacity: 0;
  animation: lighter 4s cubic-bezier(1, 2, 0.001, 0) infinite;
}

@keyframes lighter {
  50% {
    opacity: 1;
    filter: brightness(1.2) contrast(2);
  }
}

  </style>
 </HEAD>

 <BODY>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js">
 </script>
  <canvas id='canv'></canvas>
<!-- rotating and reusing: ellipse is rotated 30 and 60 degrees inside a group. Then the group is rotated three times.!-->
<div class = 'svg' id="fakir">
<svg xmlns="http://www.w3.org/2000/svg" width='900' height='900'
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -400 1000 1400" preserveAspectRatio="false">
 
 <linearGradient id="L" gradientTransform="rotate(270 .5 .5)">
 <stop offset="0" stop-color="white" stop-opacity="0"/>
  <stop offset="1" stop-color="hsla(98,100%,70%,.4)"/>
 </linearGradient>
 <g id="F">
<g id="ggg" fill="hsla(78,100%,50%,.5)">
<g id="gg" fill="inherit">
	<g id="g" fill="inherit">
		<ellipse id="E" cx="200" cy="-200" rx="10" ry="10" stroke-dasharray="1,3,1"
		opacity="1" fill="inherit" stroke="url(#L)" stroke-width="50">
		<animate attributeName="cy"  dur="26s" 
 values="800; 100; 1; -100; 800" repeatCount="indefinite"/>
		</ellipse>
		<use xlink:href="#E" transform="rotate(30,-200,260)" />
		<use xlink:href="#E" transform="rotate(60,200,260)" />
	</g>
	<use xlink:href="#g" transform="rotate(90,200,-260)"/>
	<use xlink:href="#g" transform="rotate(180,200,-260)"/>
	<use xlink:href="#g" transform="rotate(270,200,-260)"/>
</g>
</g>

<use xlink:href="#gg" transform="rotate(40,500,300)" fill="hsla(180,100%,50%,.5)"/>
<use xlink:href="#gg" transform="rotate(80,500,300)" fill="hsla(18,100%,70%,.5)"/>
</g>
<use xlink:href="#F" transform="rotate(120,500,300)" />
<use xlink:href="#F" transform="rotate(240,500,300)" />
</svg>
</div>

<svg id="paper"></svg>
<svg id="poper"></svg>
<script>
window.requestAnimFrame = (function() {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();

var c = document.getElementById("canv");
c.width = window.innerWidth;
c.height = window.innerHeight;

var $ = c.getContext("2d");
var i = 0;
var tri = {
  obj: {
    num: 15,
    step: Math.PI * 1910,
    rad: 90
  },

  draw_: function($) {
    var rot = Math.sin(2) * 60 + 5;
    $.beginPath();
    $.fillStyle = "hsla(" + i + ", 80%, 50%,1)";

    $.arc(Math.tan(12), 102, 5, 0, Math.PI * Math.pow(12, 1.2));
    $.closePath();
    $.fill();
    $.globalCompositeOperation = "multiply";
    for (var n = 0; n < 15; ++n) {
      $.beginPath();
      $.rotate(rot);
      $.fillStyle = "hsla(" + i * 32 + ", 80%, 50%,1)";
      $.arc(113, 23, Math.floor(3.5), 30, Math.PI * 32);
      $.closePath();
      $.globalCompositeOperation = "lighter";
      $.fill();

      $.beginPath();
      $.rotate(190);
      $.fillStyle = "hsla(" + i * 13 + ", 80%, 40%,.51)";
      $.fillRect(3, 1, 1, 20);
      $.arc(-13, 123, Math.tan(3.5), 0, Math.PI * 32);
      $.closePath();
      $.fill();
      $.globalCompositeOperation = "exclusion";
    }
    $.fillStyle = "hsla(" + i * 124 + ",80%, 40%,1)";
    $.rotate(rot);

    $.arc(21, 21, 4, 1, Math.PI * 2);
    $.fill();
    $.fillStyle = "hsla(" + i * 5 + ", 100%, 50%,.015)";
    $.arc(100, 100, 3, 0, Math.PI * 2);
    $.fill();
    $.globalCompositeOperation = "color";
  }
};

function Obj(mid, off_, step) {
  this.mid = mid;
  this.off_ = off_;
  this.step = step;
}

Obj.prototype.draw = function($) {
  this.step += tri.obj.step;
  $.save();
  $.translate(this.mid.x, this.mid.y);
  $.rotate(this.step + this.off_);
  tri.draw_($);
  $.restore();
};

var arr = [];
for (var i = 0; i < tri.obj.num; i++) {
  var t = i * Math.PI * 2 / tri.obj.num;
  arr.push(
    new Obj(
      {
        x: c.width / 2 + tri.obj.rad * Math.cos(t),
        y: c.height / 2 + tri.obj.rad * Math.sin(t)
      },
      t,
      Math.PI * i * 12
    )
  );
}

var go = function() {
  $.save();

  $.fillStyle = "hsla(250,50%,10%,.22)";
  $.fillRect(0, 0, c.width, c.height);

  for (var i in arr) {
    arr[i].draw($);
  }
  $.restore();
};

var run = function() {
  window.requestAnimFrame(run);
  go();
  i -= 0.35;
};

window.addEventListener(
  "resize",
  function() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
  },
  false
);

run();

var svg = Snap("#paper");
var circ = svg
.circle(1, 1, 1)
.attr({ fill: "rgba(255, 215, 96,.2)" })
.pattern(0, 0, 17, 17)
.attr({ patternTransform: "rotate(45)" });
svg.rect(0, 0, "100%", "100%").attr({ fill: circ });

var svg = Snap("#poper");
var circ = svg
.circle(1, 1, 1)
.attr({ fill: "rgba(255, 215, 96,.2)" })
.pattern(0, 0, 17, 17)
.attr({ patternTransform: "rotate(45.1)" });
svg.rect(0, 0, "100%", "100%").attr({ fill: circ });

</script>
 </BODY>
</HTML>
